import { Table, Tooltip, Radio, Form } from 'antd';
import useGetData from '@hooks/useGetData';
import { useState } from 'react';
const columns = [
  {
    title: '专业名称',
    dataIndex: ['SchoolPlan', 'pro'],
    key: 'pro',
  },
  {
    title: '性质',
    dataIndex: ['SchoolPlan', 'nature'],
    key: 'nature',
  },
  {
    title: '学制',
    dataIndex: ['SchoolPlan', 'edu_system'],
    key: 'edu_system',
  },
  {
    title: '学费（元/年）',
    dataIndex: ['SchoolPlan', 'tuition'],
    key: 'tuition',
  },
  {
    title: '计划数',
    dataIndex: ['SchoolPlan', 'plan_num'],
    key: 'plan_num',
  },
  {
    title: '详细信息',
    key: 'details',
    render: (text, record) => (
      <Tooltip title={`专业备注：${record.SchoolPlan.pro_note}`}>
        <span>查看详情</span>
      </Tooltip>
    ),
  }
];

export function AdmissionPlanComponent({ pageid }) {
  const [nature, setNature] = useState('0');
  const [apiUrl, setApiUrl] = useState(`/api/school/get_plans/${pageid}`);
  const [planData, PlanDataloading] = useGetData(apiUrl);

  const handleNatureChange = (e) => {
    const newNature = e.target.value;
    setNature(newNature);
    setApiUrl(`/api/school/get_plans/${pageid}?nature=${newNature}`);
  };

  return (
    <>
      <Form.Item label="科类" className='my-10'>
        <Radio.Group value={nature} onChange={handleNatureChange}>
          <Radio.Button value="0">理科</Radio.Button>
          <Radio.Button value="1">文科</Radio.Button>
        </Radio.Group>
      </Form.Item>

      <Table dataSource={planData} columns={columns} rowKey={(record) => record['SchoolPlan'].id} loading={PlanDataloading} bordered />
    </>
  );

}

